<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Dijit.popup and BackgroundIFrame unit test</title>
	<style type="text/css">
		@import "../../../dojo/resources/dojo.css";
		@import "../../themes/dijit.css";
		@import "../css/dijitTests.css";

		body {
			height: 100%;
			padding: 0px;
			margin: 0px;
		}

		div {
			background: white;
			border: solid 1px gray;
		}

		/* the menu type test widgets */
		.choice div {
			width: 200px;
			cursor: pointer;
		}
		.choice div:hover {
			background: #ccc;
		}
	</style>
	<script type="text/javascript" src="../../../dojo/dojo.js"
		djConfig="isDebug: true, parseOnLoad: false"></script>
	<script type="text/javascript" src="../_testCommon.js"></script>

	<script type="text/javascript">
		dojo.require("dijit.dijit");

		function log(str){
			console.log(str);
		}

		dojo.addOnLoad(function(){

			dojo.declare("SimpleDropDownButton", [dijit._Widget, dijit._Templated], {
				// summary:
				//		A button that shows a popup.
				//		Supply popup as parameter when instantiating this widget.

				label: "show popup",
				orient: {'BL': 'TL', 'BR': 'TR'},

				templateString: "<button dojoAttachEvent='onclick: openPopup'>${label}</button>",

				openPopup: function(){
					var self = this;

					dijit.popup.open({
						popup: this.popup,
						parent: this,
						around: this.domNode,
						orient: this.orient,
						onCancel: function(){
							log(self.id + ": cancel of child");
						},
						onExecute: function(){
							log(self.id + ": execute of child");
							dijit.popup.close(self.popup);
							self.open = false;
						}
					});

					this.open = true;
				},

				closePopup: function(){
					if(this.open){
						log(this.id + ": close popup due to blur");
						dijit.popup.close(this.popup);
						this.open = false;
					}
				},

				_onBlur: function(){
					// summary:
					//		This is called from focus manager and when we get the signal we
					//		need to close the drop down
					this.closePopup();
				}
			});

			dojo.declare("SimpleChoiceWidget",  [dijit._Widget, dijit._Templated], {
				// summary:
				//		A list of values; select a value by pressing an entry in the list.

				choice1: "1",
				choice2: "2",
				choice3: "3",

				templateString:
					"<div class='choice'>" +
						"<div dojoAttachEvent='onclick: onClick'>${choice1}</div>" +
						"<div dojoAttachEvent='onclick: onClick'>${choice2}</div>" +
						"<div dojoAttachEvent='onclick: onClick'>${choice3}</div>" +
					"</div>",

				onClick: function(e){
					this.onChange(e.target.innerHTML);
				},

				onChange: function(val){
					// summary:
					//		When this widget is used as a popup, dijit.popup monitors calls
					//		to onChange and then closes the popup
					log(this.id + ": selected " + val);
				}
			});

			// Create a button that displays a simple drop down
			choiceDropDown = new SimpleChoiceWidget();
			choiceDropDownButton = new SimpleDropDownButton({
				id: "choiceDropDownButton",
				label: "show choice drop down",
				popup: choiceDropDown
			}).placeAt(dojo.body());

			dojo.declare("DialogWithPopupWidget",  [dijit._Widget, dijit._Templated], {
				// summary:
				//		This is a dialog that contains a button that spawns a drop down.
				//		Supply popup as an argument to this widget.

				title: "I'm a dialog",
				label: "click me",

				templateString:
					"<div style='width: 300px'>" +
						"<div>${title}</div>" +
						"<input><br>" +
						"<button dojoAttachPoint='button'>${label}</button><br>" +
						"<button dojoAttachEvent='onclick: onExecute'>OK</button>" +
					"</div>",

				postCreate: function(){
					// Convert the plain button into a SimpleDropDownButton widget.
					// Having it be a widget is important because that's how the popup
					// code knows where a stack of nested popups (typically menus) ends.
					// (In this case closing a stack of menus shouldn't close the dialog.)

					new SimpleDropDownButton({
						id: this.id + "PopupButton",
						label: this.label,
						popup: this.popup,
						orient: {'BR': 'BL', 'TR': 'tL'}	// so popup doesn't cover OK button
					}, this.button);
				},

				onExecute: function(){
					// summary:
					//		Called when OK button is pressed.
					//		If this is used as a popup this signals to the parent that
					//		Dialog can be closed.
					console.log(this.id + ": executed");
				}
			});

			// Create a button that displays a dialog that displays a choice widget
			dialogDropDownButton = new SimpleDropDownButton({
				id: "showSimpleDialogButton",
				label: "show dialog",
				popup: new DialogWithPopupWidget({
					id: "simpleDialog",
					label: 'show simple choice drop down',
					popup: new SimpleChoiceWidget({
						id: "choiceFromDialog"
					})
				})
			}).placeAt(dojo.body());

			dojo.declare("NestedPopupOpener",  [dijit._Widget, dijit._Templated], {
				// summary:
				//		Clicking a value in this list will open a nested popup.
				//		Specify popup1 and popup2 as parameters to this widget.

				templateString:
					"<div class='choice'>" +
						"<div dojoAttachEvent='onclick: onClick'>popup1</div>" +
						"<div dojoAttachEvent='onclick: onClick'>popup2</div>" +
					"</div>",

				onClick: function(e){
					var id = this.id,
						popup = this[e.target.innerHTML];
					log(id + ": opening popup " + popup.id);
					this.openPopup(popup);
				},

				openPopup: function(popup){
					dijit.popup.open({
						popup: popup,
						parent: this,
						around: this.domNode,
						orient: {'TR': 'TL', 'TL': 'TR'},
						onCancel: function(){
							log(id + ": cancel of child " + popup.id);
						},
						onExecute: function(){
							log(id + ": execute of child " + popup.id);
							dijit.popup.close(popup);
						}
					})
				},

				closePopup: function(popup){
					dijit.popup.close(popup);
				}
			});

			// Create a button that displays a nested drop down.
			nestedOpener = new NestedPopupOpener({
				id: 'nestedPopupOpener',
				popup1: (nestedChoice1 = new SimpleChoiceWidget({
					id: "nestedChoice1"
				})),
				popup2: (nestedChoice2 = new SimpleChoiceWidget({
					id: "nestedChoice2",
					choice1: "4",
					choice2: "5",
					choice3: "6"
				}))
			});
			nestedDropDownButton = new SimpleDropDownButton({
				id: "showNestedMenuButton",
				label: "show nested drop down",
				popup: nestedOpener
			}).placeAt(dojo.body());

			// Create a button that displays a dialog that displays a nested drop down
			dialogNestedChoice1 = new SimpleChoiceWidget({
				id: "dialogNestedChoice1"
			});
			dialogNestedChoice2 = new SimpleChoiceWidget({
				id: "dialogNestedChoice2",
				choice1: "4",
				choice2: "5",
				choice3: "6"
			});
			dialogNestedPopupOpener = new NestedPopupOpener({
				id: "nestedPopupOpenerFromDialog",
				popup1: dialogNestedChoice1,
				popup2: dialogNestedChoice2
			});
			dialogWithNestedPopup = new DialogWithPopupWidget({
				id: "buttonInComplexDialog",
				label: 'show nested menu',
				popup: dialogNestedPopupOpener
			});
			dialogDropDownButton = new SimpleDropDownButton({
				id: "showComplexDialogButton",
				label: "show dialog w/nested menu",
				popup: dialogWithNestedPopup
			}).placeAt(dojo.body());

		});

	</script>
</head>
<body>
	<h1>dijit.popup and BackgroundIFrame Unit Test</h1>
	<button>simple button</button>
</body>
</html>
